<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8" />
    <link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../vendor/bootstrap/css/bootstrap-select.min.css" rel="stylesheet">
    <link href="../css/popup.css" rel="stylesheet" type="text/css">
    <title>QQ空间导出助手</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
</head>

<body>
    <div>
        <h4>QQ空间导出助手</h4>
        <hr>
        <details>
            <summary>使用说明</summary>
            <div class="container">
                <ul class="list-unstyled">
                    <li>1.点击开始备份</li>
                    <li>2.等待备份完成</li>
                    <li>3.点击下载按钮</li>
                    <li>4.等待下载完成</li>
                    <li>5.选择文件保存位置</li>
                </ul>
            </div>
        </details>
        <hr>
        <p>登录QQ：<span style="color: red" id="loginUin"></span></p>
        <p>备份QQ：<span style="color: red" id="targetUin"></span></p>
        <p>当前模式：<span style="color: red" id="userType"></span></p>
        <hr>
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input" id="Messages" name="exportType" value="MESSAGES_LIST" checked>
            <label class="custom-control-label" for="Messages">说说</label>
        </div>
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input" id="Blogs" name="exportType" value="BLOG_LIST" checked>
            <label class="custom-control-label" for="Blogs">日志</label>
        </div>
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input" id="Diaries" name="exportType" value="DIARY_LIST" checked>
            <label class="custom-control-label" for="Diaries">私密日记</label>
        </div>
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input" id="Photos" name="exportType" value="PHOTO_LIST" checked>
            <label class="custom-control-label" for="Photos">相册</label>
        </div>
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input" id="Videos" name="exportType" value="VIDEO_LIST" checked>
            <label class="custom-control-label" for="Videos">视频</label>
        </div>
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input" id="Boards" name="exportType" value="BOARD_LIST" checked>
            <label class="custom-control-label" for="Boards">留言板</label>
        </div>
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input" id="Friends" name="exportType" value="FRIEND_LIST" checked>
            <label class="custom-control-label" for="Friends">好友</label>
        </div>
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input" id="Favorites" name="exportType" value="FAVORITE_LIST" checked>
            <label class="custom-control-label" for="Favorites">收藏夹</label>
        </div>
        <div class="container" style="margin-top: 10px">
            <span id="tips" style="display: none;color: red;"></span>
            <div id="export_albums_div" class="form-group row" style="display: none;">
                <label for="export_albums" class="col-sm-1 col-form-label">相册列表：</label>
                <div class="col-sm-2">
                    <select id="export_albums" class="form-control selectpicker" data-live-search="true" multiple title="请选择相册" data-live-search-placeholder="搜索相册" data-actions-box="true" data-selected-text-format="count > 3">
                        <optgroup label="分类">
                            <option value="1">相册一</option>
                            <option value="2">相册二</option>
                            <option value="3">相册三</option>
                        </optgroup>
                    </select>
                </div>
            </div>
        </div>
        <br>
        <button id="backup" type="button" class="btn btn-primary">开始备份</button>
    </div>
    <script src="../js/utils.js"></script>
    <script src="../vendor/jquery/jquery-3.3.1.min.js"></script>
    <script src="../vendor/popper/popper.min.js"></script>
    <script src="../vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="../vendor/bootstrap/js/bootstrap-select.min.js"></script>
    <script src="../vendor/bootstrap/js/bootstrap-select-zh_CN.min.js"></script>
    <script src="../js/popup.js"></script>
</body>

</html>